<template>
  <div style="margin-top: 20px">
    <!--表格开始-->
    <a-table :columns="columns"
             rowKey="id"
             :expandedRowKeys="expandedRowKeys"
             :data-source="workloads"
             class="components-table-demo-nested"
             @expand="expand"
             :pagination="false"
             :bordered="true">

      <a-table
          slot="expandedRowRender"
          :columns="innerColumns"
          :data-source="tasks"
          :pagination="false"
          id="innerTable"
          :bordered="true">


      </a-table>
    </a-table>
    <div class="pagination">
      <a-pagination
          v-model="pageParam.current"
          show-size-changer
          :page-size.sync="pageParam.pageSize"
          :total="pageParam.total"
          @showSizeChange="onShowSizeChange"
          @change="onPageChange"
      />
    </div>
  </div>
</template>
<script>

import {listTaskFinalWorkloadVOByPage, listTaskFinalVOByTeacher} from "@/services/taskFinal";

const columns = [
  {
    title: 'id',
    dataIndex: 'id',
    scopedSlots: { customRender: 'id' },
  },
  {
    title: '授课教师',
    dataIndex: 'teacher',
    scopedSlots: { customRender: 'teacher' },
  },
  {
    title: '学年学期',
    dataIndex: 'semester',
    scopedSlots: { customRender: 'semester' },
  },
  {
    title: '工作量',
    dataIndex: 'workload',
    scopedSlots: { customRender: 'workload' },
  }
]

const innerColumns = [
  // {
  //   title: 'id',
  //   dataIndex: 'id',
  //   scopedSlots: { customRender: 'id' },
  // },
  {
    title: '课程',
    dataIndex: 'courseName',
    scopedSlots: { customRender: 'courseName' },
  },
  {
    title: '课程类型',
    dataIndex: 'courseType',
    scopedSlots: { customRender: 'courseType' },
  },
  {
    title: '年级',
    dataIndex: 'grade',
    scopedSlots: { customRender: 'grade' },
  },
  {
    title: '专业',
    dataIndex: 'major',
    scopedSlots: { customRender: 'major' },
  },
  {
    title: '学分',
    dataIndex: 'credit',
    scopedSlots: { customRender: 'credit' },
  },
  {
    title: '理论学时',
    dataIndex: 'theoretical',
    scopedSlots: { customRender: 'theoretical' },
  },
  {
    title: '实验学时',
    dataIndex: 'experimental',
    scopedSlots: { customRender: 'experimental' },
  },
  {
    title: '教学班人数',
    dataIndex: 'actualNum',
    scopedSlots: { customRender: 'actualNum' },
  },
  {
    title: '是否合班',
    dataIndex: 'merge',
    scopedSlots: { customRender: 'merge' },
  },
  {
    title: '学年学期',
    dataIndex: 'semester',
    scopedSlots: { customRender: 'semester' },
  },
]

export default {
  components: {  },
  data() {
    return {
      pageParam :{
        pageSize: 10,
        current: 1,
        total: 200,
      },
      workloads: [],
      tasks: [],
      columns,
      innerColumns,
      expandedRowKeys: [],//控制显示子表格
    };
  },

  methods: {
    refreshData() {
      this.onPageChange(this.pageParam.current, this.pageParam.pageSize )
    },

    onShowSizeChange(current, pageSize) {
      listTaskFinalWorkloadVOByPage(current, pageSize).then(this.afterChange)
    },
    onPageChange(page, pageSize) {
      listTaskFinalWorkloadVOByPage(page, pageSize).then(this.afterChange)
    },
    afterChange(res) {
      const changeRes = res.data
      if (changeRes.code == 200){
        const pageRes = changeRes.data
        this.pageParam.current = pageRes.current
        this.pageParam.pageSize = pageRes.size
        this.pageParam.total = pageRes.total
        this.workloads = pageRes.records
      } else {
        this.$message.error = changeRes.message
      }
    },
    //展开节点操作
    expand(expanded, record) {
      this.expandedRowKeys = []
      if (expanded) {
        if (record){
          this.expandedRowKeys = [record.id];
        }
        listTaskFinalVOByTeacher(record.teacher, record.semester).then(res => {
          const result = res.data
          if (result.code == 200) {
            this.tasks = result.data
          } else {
            this.$message.error(result.message)
          }
        })
      }
    },
  },
  created() {
    this.refreshData()
  }
};
</script>
<style scoped>
.editable-row-operations a {
  margin-right: 8px;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.my-btn {
  text-align: right;
  margin-right: 10px;
  margin-bottom: 10px;
}

</style>
